import React from 'react';
import "@/styles/_login.scss"
import Register from './register';
import LoginCom from './loginCom';
import history from '@/history';
import { withRouter } from 'react-router-dom';
import { Row, Col, Input, Button, message } from 'antd';
import { postFn } from '@/api/commonApi';
class Login extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            currentUrl: this.props.match.params.code,
            username: "",
            setPassword: {
                username: "",
                email: "",
                newPassword: "",
                captcha: "",
            },
            count: 60,
            liked: true,
        };
    }
    // 监听路由变化
    componentDidUpdate(nextProps: any) {
        if (this.props.location !== nextProps.location) {
            let state = this.props.history.location.state;
            let username = state ? state.username || "" : "";
            this.setState({ currentUrl: this.props.match.params.code, username: username });
        }
    }

    render() {
        return (
            <div className="login-wrap">
                {this.state.currentUrl === 'login' ?
                    <div className="l-w-c login">
                        <div className="login-t">
                            登陆 <span>REGISTERED MEMBER</span>
                        </div>
                        <div className="login-comtent">
                            <LoginCom goPath={this.goPath.bind(this)} username={this.state.username} />
                        </div>
                    </div> : this.state.currentUrl === 'register' ?
                        <div className="l-w-c register">
                            <div className="l-w-c-l">
                                <div className="reg-t">
                                    注册 <span>REGISTERED MEMBER</span>
                                </div>
                                <div className="reg-content">
                                    <Register goPath={this.goPath.bind(this)} />
                                </div>
                            </div>
                            <div className="l-w-c-r">
                                <div className="l-w-c-r-t">
                                    已有泡豚互联账号?<br />
                                    <Button type="primary" href="#/login/login" style={{ marginTop: "5px" }}>
                                        登陆
                                        </Button>
                                </div>
                                <div className="l-w-c-r-c">
                                    <p>注册成功，即享特权：</p>
                                    <p>1. 领取新人大礼包</p>
                                    <p>2. 免费试用云服务器</p>
                                </div>
                            </div>
                        </div> :
                        <div className="l-w-c setPassword">
                            <div className="l-w-c-l">
                                <h3>找回密码</h3>
                                <Row gutter={20}>
                                    <Col span={6} className="text-right label-col">
                                        用户名
                                    </Col>
                                    <Col span={18}>
                                        <Input placeholder="输入您的用户名" className="col-input"
                                            onChange={this.handelChange.bind(this, 'username')} />
                                    </Col>
                                    <Col span={6} className="text-right label-col">
                                        电子邮箱
                                    </Col>
                                    <Col span={18}>
                                        <Input placeholder="输入您注册时的电子邮箱" className="col-input"
                                            onChange={this.handelChange.bind(this, 'email')} />
                                    </Col>
                                    <Col span={6} className="text-right label-col">
                                        邮箱验证码
                                    </Col>
                                    <Col span={18}>

                                        <Row gutter={8}>
                                            <Col span={14}>
                                                <Input placeholder="请输入验证码" className="col-input"
                                                    onChange={this.handelChange.bind(this, 'captcha')} />
                                            </Col>
                                            <Col span={10}>
                                                <Button style={{ width: "100%" }}
                                                    disabled={this.state.liked ? false : true}
                                                    onClick={this.getCaptcha.bind(this)}>
                                                    {this.state.liked ? '获取验证码' : `${this.state.count}秒后重新获取`}
                                                </Button>
                                            </Col>
                                        </Row>
                                    </Col>
                                    <Col span={6} className="text-right label-col">
                                        重置密码
                                    </Col>
                                    <Col span={18}>
                                        <Input.Password placeholder="重置新密码" className="col-input"
                                            onChange={this.handelChange.bind(this, 'newPassword')} />
                                    </Col>
                                    <Col span={6} className="text-right label-col">
                                        确认密码
                                    </Col>
                                    <Col span={18}>
                                        <Input.Password placeholder="请再次输入您的密码" className="col-input"
                                            onChange={this.handelChange.bind(this, 'confirmNewPassword')} />
                                    </Col>
                                    <Col offset={6} span={18}>
                                        <Button type="primary" block onClick={this.setPassword.bind(this)}>
                                            提交
                                        </Button>
                                    </Col>
                                </Row>
                            </div>
                            <div className="l-w-c-r">
                                <div className="l-w-c-r-t">
                                    已有泡豚互联账号?<br />
                                    <Button type="primary" href="#/login/login" style={{ marginTop: "5px" }}>
                                        登陆
                                    </Button>
                                </div>
                                <div className="l-w-c-r-c">
                                    <p>注册成功，即享特权：</p>
                                    <p>1. 领取新人大礼包</p>
                                    <p>2. 免费试用云服务器</p>
                                </div>
                            </div>
                        </div>
                }
            </div>
        )
    }
    // 跳转路由
    goPath(url: string, data?: any) {
        let history = this.props.history;
        let urlObj = { pathname: url, ...data };
        history.push(urlObj);
    }

    // 获取input的值
    handelChange(target: any, e: any, ) {
        let data: any = {};
        data[target] = e.target.value;
        let setPassword = Object.assign({}, this.state.setPassword, data);
        this.setState({ setPassword: setPassword })
    }

    // 获取验证码倒计时
    async getCaptcha() {
        let { username, email } = this.state.setPassword;
        if (username === "") {
            message.error(`还未输入账号`);
            return;
        }
        if (email === "") {
            message.error(`还未输入邮箱`);
            return;
        }

        this.countDown();
        let res: any = await postFn("getSetPasswordCaptcha", { username, email });
        if (!res) return;
        if (res.isok) {
            message.success(res.msg);
        } else {
            message.error(res.msg, 5);
            this.setState({ count: res.count + 1 });
        }
    };
    countDown() {
        const { count } = this.state;
        if (count === 1) {//当为0的时候，liked设置为true，button按钮显示内容为 获取验证码
            this.setState({
                count: 60,
                liked: true,
            })
        } else {
            this.setState({
                count: count - 1,
                liked: false,
            })
            setTimeout(() => this.countDown(), 1000)//每一秒调用一次
        }
    }

    // 找回密码
    async setPassword() {
        let setPasswordData = { ...this.state.setPassword };
        console.log(setPasswordData);
        if (setPasswordData.username === "") {
            message.error(`还未输入账号`);
            return;
        }
        if (setPasswordData.email === "") {
            message.error(`还未输入邮箱`);
            return;
        }
        if (setPasswordData.captcha === "") {
            message.error(`还未输入验证码`);
            return;
        }
        if (setPasswordData.newPassword === "") {
            message.error(`还未输入新密码`);
            return;
        }
        if (setPasswordData.newPassword.length < 5) {
            message.info(`密码需要大于6位`);
            return;
        }
        if (setPasswordData.newPassword !== setPasswordData.confirmNewPassword) {
            message.error(`两次密码不一致，请重新输入`);
            return;
        }
        let res: any = await postFn('resetPassword', setPasswordData);
        if (!res) return;
        if (res.isok) {
            message.success(`修改成功`);
            history.goBack();
            this.setState({ username: setPasswordData.username });
        } else {
            message.error(res.msg ? res.msg : "因网络延迟修改失败，请稍等1分钟后再尝试！");
        }
    }



}

export default withRouter(Login);


